import { StarFill } from '@nutui/icons-react-taro';
import { Image } from '@nutui/nutui-react-taro';
import { Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import coffee from '@/assets/images/coffee.png';
import useQuery from '@/hooks/useQuery';
import gql from 'graphql-tag';
import { useCallback, useMemo } from 'react';
import { Button } from '@nutui/nutui-react-taro';
import useMutation from '@/hooks/useMutation';

const VisCollectionQuery = gql`
  query VisCollect($id:Int!){
    visCollect(id:$id)
  }
`
const SetCollectionMutation = gql`
  mutation SetCollect($id:Int!,$type:Int!){
    setCollect(id:$id,type:$type)
  }
`
const GetShopRateQuery = gql`
  query GetShopRate($id:Int!){
    getShopRate(id:$id)
  }
`
const ShopCard = ({
  id,
  name,
  count,
  threshold,
  total,
  information,
  hash_key
}: any) => {
  // 店铺详情
  const onShopDetail = () => {
    Taro.navigateTo({
      url: '/pages/ShopDetail/index?id=' + id,
    });
  };
  const { data: RateQuery } = useQuery(GetShopRateQuery, { variables: { id }, autoFetch: true });
  const rate = useMemo(() => RateQuery?.getShopRate || 0, [RateQuery]);
  const { data, refetch } = useQuery(VisCollectionQuery, { variables: { id }, autoFetch: true })
  // const { data: ShopCollectCount } = useQuery(GetCollectCountQuery, { variables: { id }, autoFetch: true });

  const isCollection = useMemo(() => data?.visCollect || false, [data]);
  // const collectionCount = useMemo(() => ShopCollectCount?.getCollectCount, [ShopCollectCount])
  const [set] = useMutation(SetCollectionMutation, {
    onCompleted() {
      refetch({ id })
    }
  })
  const collection = useCallback(() => {
    set({
      id,
      type: +!isCollection
    })
  }, [isCollection])
  return (
    <View
      className="flex flex-col mx-[32rpx] mb-[24rpx] py-[24rpx] px-[16rpx] bg-[#fff] rounded-2"
    >
      <View className="flex flex-row">
        <View onClick={onShopDetail}>
          <Image src={`http://localhost:14530/media/shop/${hash_key}/avatar`} width="100" height="100" radius="10rpx" />
        </View>
        <View className="ml-[16rpx] flex justify-between flex-col flex-1 overflow-hidden color-[#999999]">
          <View onClick={onShopDetail} className="text-[28rpx] font-bold color-[#333333] truncate">{name}</View>
          <View onClick={onShopDetail} className="flex justify-between">
            <View className="flex-align flex-row">
              <StarFill color="#157658" size="20" />
              <Text className="ml-[6rpx] text-[26rpx] color-[#157658]">{rate}</Text>
              <Text className="ml-[20rpx] text-[26rpx]">月售 {count}</Text>
            </View>
            <View className="flex-align flex-row">
              {/* <Location size="26rpx" /> */}
              {/* <Text className="ml-[8rpx] text-[26rpx]">3.5km</Text> */}
            </View>
          </View>
          <View onClick={onShopDetail} className="flex-align flex-row">
            <Text className="text-[26rpx]">起送 ¥{threshold / 100}</Text>
            <Text className="ml-[20rpx] text-[26rpx]">配送 ¥{total / 100}</Text>
          </View>
          <View className="color-[#fff]">
            <Text className="bg-[#157658] rounded-4 px-[10rpx] text-[26rpx]">{information}</Text>
          </View>
          <View>
            <Button onClick={collection} block type={isCollection ? "danger" : "primary"} color="#157658">
              {isCollection ? "取消收藏" : "收藏"}
            </Button>
          </View>
        </View>
      </View>

    </View>
  );
};

export default ShopCard;
